<template>
    <div>
        <p style="padding: 0 20px 15px 0;float: right">
            <el-button type="success" plain @click="editForm(null)" >添加员工</el-button>
        </p>

        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="id"
                    label="编号"
                    width="70px">
            </el-table-column>
            <el-table-column
                    prop="imgurl"
                    label="照片"
                    width="100px">
                <template slot-scope="scope">
                    <img :src="scope.row.imgurl" height="100px" width="75px"/>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="job"
                    label="工作">
            </el-table-column>
            <el-table-column
                    prop="salary"
                    label="工资">
            </el-table-column>
            <el-table-column
                    prop="entrydate"
                    label="创建时间">
            </el-table-column>
<!--            <el-table-column-->
<!--                    prop="dept.name"-->
<!--                    label="部门">-->
<!--            </el-table-column>-->
<!--            <el-table-column-->
<!--                    prop="managerid"-->
<!--                    label="上司">-->
<!--            </el-table-column>-->
            <el-table-column
                    width="280px"
                    fixed="right"
                    label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" @click="editForm(scope.row)">编辑</el-button>
                                <el-button type="danger" icon="el-icon-delete" @click="delEmp(scope.row)">删除</el-button>
                            </template>
            </el-table-column>

        </el-table>

        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="size"
                layout="prev, pager, next, sizes, total, jumper"
                :total="total">
        </el-pagination>

        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form ref="form" :model="empForm" label-width="80px">
                <el-form-item>
                    <div id="upload">
                        <el-upload
                                class="avatar-uploader"
                                action="http://localhost:8090/upload/sure"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="empForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="empForm.age"></el-input>
                </el-form-item>
                <el-form-item label="职位">
                    <el-input v-model="empForm.job"></el-input>
                </el-form-item>
                <el-form-item label="薪水">
                    <el-input v-model="empForm.salary"></el-input>
                </el-form-item>
                <el-form-item label="入职时间">
                    <el-col :span="11">
                        <el-date-picker type="date"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择日期"
                                        v-model="empForm.entrydate"
                                        style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
<!--                <el-form-item label="上司">-->
<!--                    <el-select v-model="empForm.managerid" placeholder="请选择上司">-->
<!--                        <el-option-->
<!--                                v-for="item in EmpData2"-->
<!--                                :label="item.name"-->
<!--                                :key="item.id"-->
<!--                                :value="item.id">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
                <el-form-item label="所在部门">
                    <el-select v-model="empForm.deptId" placeholder="请选择所在部门" style="width: 100%">
                        <el-option
                                v-for="item in DeptData"
                                :label="item.name"
                                :key="item.id"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button type="primary" @click="comfirmUpdate" v-show="empForm.id != 0">确 定 修 改</el-button>
						<el-button type="success" @click="addEmp" v-show="empForm.id == 0">添 加 员 工</el-button>
					  </span>
        </el-dialog>

    </div>

</template>

<script>
    export default {
        name: "emp",
        data() {
            return {
                dialogVisible: false,
                tableData: [],
                DeptData:[],
                empForm:{},
                total: 5,
                currentPage: 1,
                size: 5,
                imageUrl:'',
            }
        },
        created() {
            this.initEmp();
            this.initDept();
        },
        methods: {

            initEmp(currentPage,size){
                this.$http.get("http://localhost:8090/emp?currentPage="+this.currentPage + "&pageSize=" + this.size).then(result =>{
                    if(result.data.code === 200){
                        this.tableData = result.data.data.records;
                        this.total = result.data.data.total;
                    }
                })
            },

            //初始化dept表的全部数据
            initDept() {
                this.$http.get("http://localhost:8090/dept?currentPage="+1+"&pageSize="+10).then(result=>{
                    if(result.data.code === 200){
                        this.DeptData = result.data.data.records;
                    }
                })
            },

            //设置点击事件，点击修改弹出输入框
            editForm(row){
                this.dialogVisible = true;
                if(row != null){
                    this.empForm = row;
                    this.imageUrl = row.imgurl;
                }else {
                    this.imageUrl = '';
                    this.empForm = {id:'',age:'',job:'',entrydate:'',salary:'',managerid:'',deptId:'',dept:{id:'',name:''},imgurl:''};
                }
            },

            //确认修改
            comfirmUpdate(){
                this.empForm.imgurl = this.imageUrl;
                this.$http.put("http://localhost:8090/emp",this.empForm).then(result=>{
                    if(result.data.code === 200){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        //关闭弹窗
                        this.dialogVisible = false;
                        //重新加载emp表格数据
                        this.initEmp(this.currentPage,this.size);
                    }else {
                        this.$message({
                            showClose: true,
                            message: '修改失败',
                            type: 'warning'
                        });
                    }
                })
            },

            addEmp(){
                this.empForm.imgurl = this.imageUrl;
                this.$http.post("http://localhost:8090/emp",this.empForm).then(result=>{
                    if(result.data.code===200){
                        this.$message({
                            showClose: true,
                            message: '添加成功',
                            type: 'success'
                        });
                        //关闭弹窗
                        this.dialogVisible = false;
                        //重新加载emp表格数据
                        this.initEmp(this.currentPage,this.size);
                    }else {
                        this.$message({
                            showClose: true,
                            message: '添加失败',
                            type: 'warning'
                        });
                    }
                })
            },

            //删除主页的一条数据
            delEmp(row){
                this.$http.delete("http://localhost:8090/emp?id="+row.id).then(result=>{
                    if(result.data.code === 200){
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                        this.initEmp(this.currentPage,this.size);
                    }else {
                        this.$message({
                            showClose: true,
                            message: '删除失败',
                            type: 'warning'
                        });
                    }
                })
            },

            //绑定pageSize 改变的事件
            handleSizeChange(newsize){
                console.log(newsize);
                this.size = newsize;
                this.initEmp(this.currentPage,this.size);
            },

            //绑定页面值 改变的事件
            handleCurrentChange(newPage){
                console.log(newPage);
                this.currentPage = newPage;
                this.initEmp(this.currentPage, this.size);
            },

            //上传头像
            handleAvatarSuccess(res, file) {
                this.imageUrl = res.data;
                console.log(res.data);
            },

            //上传头像的限制条件
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        },
    }
</script>

<style scoped>
    #upload{
        margin: 0px 50px;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 200px;
        line-height: 200px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 200px;
        display: block;
    }
</style>